<template>
  <div class="login">
    <div class="item-list" style="margin-top:calc(30rem/75)">
      <span class="red msg">{{msg.name}}</span>
      <span class="red require">*</span>
      <span class="label">姓名</span>
      <van-cell-group class="van-hairline--surround">
        <van-field v-model="form.name" @input="msg.name = ''" />
      </van-cell-group>
    </div>
    <div class="item-list" style="margin-top:calc(57rem/75)">
      <span class="red msg">{{msg.mobile }}</span>
      <span class="red require">*</span>
      <span class="label">电话</span>
      <van-cell-group class="van-hairline--surround">
        <van-field v-model="form.mobile " @input="msg.mobile  = ''" />
      </van-cell-group>
    </div>
    <div class="item-list" style="margin-top:calc(61rem/75)">
      <span class="red require">*</span>
      <span class="label">门店</span>
      <van-cell-group class="van-hairline--surround">
        <van-field v-model="city" @focus="cityPicker = true" @click.native="cityPicker = true" readonly />
        <div class="arrow" />
        <van-actionsheet v-model="cityPicker">
          <van-picker confirm-button-text=" " cancel-button-text=" " show-toolbar :columns="cityOption" @cancel="cityPicker = false" @confirm="cityConfirm" @change="cityChange" />
        </van-actionsheet>
      </van-cell-group>
    </div>
    <div class="item-list" style="margin-top:calc(37rem/75)">
      <span class="red msg">{{msg.shop}}</span>
      <span class="red require" />
      <span class="label" />
      <van-cell-group class="van-hairline--surround">
        <van-field v-model="shop" @focus="shopPicker = true" @click.native="shopPicker = true" readonly />
        <div class="arrow" />
        <van-actionsheet v-model="shopPicker">
          <van-picker confirm-button-text=" " cancel-button-text=" " show-toolbar :columns="shopOption" @cancel="shopPicker = false" @confirm="shopConfirm" />
        </van-actionsheet>
      </van-cell-group>
    </div>
    <van-button style="margin-top:calc(54rem/75)" type="danger" class="btn" @click="submit" :loading="submitLoading">进入课程</van-button>
    <van-popup v-model="show" get-container="#app">
      <div class="show-modal">
        <span class="close" @click="show = false">x</span>
        <p class="content">前联系工作人员完成资料录入<br />或者检查资料是否填写正确。</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import validator from 'utils/validator.js'
import { mapGetters } from 'vuex'
import { getStores } from 'api'
export default {
  name: 'login',
  data() {
    return {
      form: {
        name: '',
        mobile: '',
        store_id: ''
      },
      city: '',
      shop: '',
      msg: {
        name: '',
        mobile: '',
        store_id: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '输入姓名'
          }
        ],
        mobile: [
          {
            required: true,
            message: '输入电话'
          }
        ],
        store_id: [
          {
            required: true,
            message: '选择门店'
          }
        ]
      },
      validator: null,
      cityPicker: false,
      cityOption: [],
      shopPicker: false,
      shopOption: [],
      submitLoading: false,
      show: false
    }
  },
  computed: {
    ...mapGetters(['stores', 'region'])
  },
  created() {
    ;(this.cityOption = [
      {
        values: this.region.map(v => v.name)
      },
      {
        values: this.region[0].child.map(v => v.name)
      }
      // {
      //   values: this.region[0].child[0].child.map(v => v.name)
      // }
    ]),
      (this.validator = validator(this.rules, this.form))
  },
  methods: {
    resetField(attrs) {
      attrs = !attrs
        ? Object.keys(this.msg)
        : Array.isArray(attrs)
          ? attrs
          : [attrs]
      attrs.forEach(attr => (this.msg[attr] = ''))
    },
    shopConfirm(value) {
      this.shop = value.text
      this.form.store_id = value.value
      this.shopPicker = false
    },
    toValidat(data, callback) {
      this.validator.validate((errors, fields) => {
        this.resetField()
        if (errors) {
          fields.forEach(item => (this.msg[item.field] = item.message))
        }
        callback && callback(errors, fields)
      }, data)
    },
    submit() {
      this.toValidat(this.form, async errors => {
        if (!errors) {
          this.submitLoading = true
          let res = await this.$store.dispatch('Bind', this.form)
          if (res) {
            this.$router.push('/list')
          } else {
            this.show = true
          }
          this.submitLoading = false
        }
      })
    },
    cityChange(picker, values) {
      const v2 = this.region.find(v => v.name === values[0])
      const cityArr = this.region.map(v => v.child)
      // let v3
      // cityArr.forEach(child => {
      //   child.forEach(city => {
      //     if (city.name === values[1]) {
      //       v3 = city.child.map(v => v.name)
      //     }
      //   })
      // })
      picker.setColumnValues(1, v2.child.map(v => v.name))
      // picker.setColumnValues(2, v3)
    },
    async cityConfirm(values, index) {
      const valueObj = this.region[index[0]].child[index[1]]
      this.city = values.join(',')
      let res = await getStores({ region: valueObj.id })
      if (res) {
        this.shopOption = res.results.map(
          v =>
            (v = {
              text: v.name,
              value: v.id
            })
        )
      }
      this.cityPicker = false
    }
  }
}
</script>

<style lang="stylus">
.login
  padding 85px 68.5px
  width 474px
  height 626px
  position absolute
  top 50%
  left 50%
  margin-left -237px
  margin-top -313px
  background url('../assets/img/container.png') center center no-repeat
  background-size contain
  box-sizing border-box

  .item-list
    position relative
    font-size 100%

    .label
      width 55px

    &>span
      flex 0 0 auto
      font-size 20px

    .arrow
      width 11px
      height 7px
      position absolute
      right 16px
      top 18px
      background url('../assets/img/arrow.png') center center no-repeat
      background-size contain

  .require
    position absolute
    left 0
    transform translateX(-100%)

  span
    display inline-block

  .msg
    position absolute
    top 0
    transform translateY(-100%)
    margin-left 55px
</style>
